<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Axios异步通信</title>
</head>
<body>
<!-- 创建==>初始化数据==>编译模板==>挂载DOM==>渲染==>更新==>渲染、卸载 如：-->
<div id="app">
    <div>
        {{info.name}}
        {{info.address.street}},{{info.address.city}}
        <a v-bind:herf="info.url"></a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
    el:"#app",
    //钩子函数
    //这个data是个方法
    data(){
        return{
            //请求的返回参数必须和json字符串一样
            info:{
                name:null,
                address:{
                    street:null,
                    city:null
                },
                url:null
            }
        }
    },
    mounted(){
        //通信交给下面这个地方可以改成ajax
        axios.get('data.json').then(response=>(this.info=response.data))
    }
});
</script>


</html>